<template>
    <div class="mainContainer">
        <div class="flexContainer" ref="flexContainer">

            <div class="courseInfo">
                <div class="introBox intro_1">
                    <img v-lazy="require('@/assets/img/yedn/1.png')">
                </div>
                <div class="introBox intro_2">
                    <img v-lazy="require('@/assets/img/yedn//2.png')">
                </div>
                <div class="introBox intro_3">
                    <img v-lazy="require('@/assets/img/yedn//3.png')">
                </div>
                <div class="introBox intro_4">
                    <img v-lazy="require('@/assets/img/yedn//4.png')">
                </div>
                <div class="introBox intro_5">
                    <img v-lazy="require('@/assets/img/yedn//5.png')">
                </div>
                <div class="introBox intro_6">
                    <img v-lazy="require('@/assets/img/yedn//6.png')">
                </div>
                <div class="introBox intro_7">
                    <img v-lazy="require('@/assets/img/yedn//7.png')">
                </div>
                <div class="introBox intro_8">
                    <img v-lazy="require('@/assets/img/yedn//8.png')">
                </div>
                <div class="introBox intro_9">
                    <img v-lazy="require('@/assets/img/yedn//9.png')">
                </div>
                <div class="introBox intro_10">
                    <img v-lazy="require('@/assets/img/yedn//10.png')">
                </div>
                <div class="introBox intro_11">
                    <img v-lazy="require('@/assets/img/yedn//11.png')">
                </div>  
            </div>

            <!-- <transition name="sliderUp">
            <div class="gotoTop" v-show="isRocket" @click="gotoTab(1)"></div>
            </transition> -->

            <!-- <div class="fixTabBot">         
                <div class="fixTab"  @click="gotoTab(1)">招商海报</div>
                <div class="fixTab"  @click="gotoTab(2)">达达数学</div>
                <div class="fixTab activ"  @click="gotoTab(3)">幼教大脑</div>
                <div class="fixTab"  @click="gotoTab(4)">咨询政策</div>
            </div> -->


            <transition name="sliderRight">
                <div class="infoLayer" v-show="isLayer">

                        <img src="../assets/img/tyIntroold.png">

                </div>
            </transition>
            <div class="mask" v-show="isLayer" @click="isLayer=false"></div>

        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            videoLayer:false,
            srcurl:'',
            tabNo:1,
            isRocket:false,
            isLayer:false,
            msizeFont:0,
        }
    },
    mounted(){
        window.document.title = '天音幼教大脑';
        console.log(this.$refs['flexContainer']);
        this.msizeFont = parseInt(getComputedStyle(window.document.documentElement)['font-size'])
        this.$refs['flexContainer'].onscroll = this.scrollFun; //IE/Opera/Chrome 
    },
    methods:{
        openVideo(){
            this.videoLayer = true;
            this.srcurl = 'http://pics.91118.com/flash/xuequ/Introduce.mp4';
            let videoObj = document.getElementById("myVideo");
            videoObj.play();
        },
        closeVideo(){
            this.videoLayer = false;
            let videoObj = document.getElementById("myVideo");
            videoObj.pause();
        },
        scrollFun(e){
            let scrollTop = e.target.scrollTop;
            console.log(scrollTop,"scrollTop")
            if(scrollTop>500){
                this.isRocket = true;
            }else{
                this.isRocket = false;
            }

            if(scrollTop>=(41*this.msizeFont)&&scrollTop<(102*this.msizeFont)){
                this.tabNo = 2;
            }else if(scrollTop>=(51*this.msizeFont)){
                this.tabNo = 3;
            }else{
                this.tabNo = 1;
            }
        },
        gotoTab(no){
            this.tabNo = no;
            if(no==1){
                this.$router.push({path:'/'})
            }else if(no==2){
                this.$router.push({path:'/ddsx'}) 
            }else if(no==3){
                this.$refs['flexContainer'].scrollTop = 1 
            }
            else if(no==4){
                
            }
        }
    }
}
</script>

<style lang='scss' scoped>
.gif1,.gif2{
    width: 5.3rem;
    height: 3.2rem;
    display: block;
    position: absolute;
}
.gif1{
    top: 6.25rem;
    left: 1.1rem;
}
.gif2{
    top: 11.12rem;
    left: 1.1rem;
}
.ewm{
    width: 100%;
    height: 2.6rem;
    text-align: center;
    margin-top: 0;
    img{
        height: 2.6rem;
        width: auto;
    }
}
.lxr{
    width: 5.6rem;
    height: 2.4rem;
    background: url(../assets/img/lxr.png) no-repeat;
    background-size: 100% 100%;
    margin: .3rem auto;
}
.lxrTit{
    width: 5.6rem;
    height: 1.5rem;
    background: url(../assets/img/lxrtit.png) no-repeat;
    background-size: 100% 100%;
    margin: .4rem auto .2rem;
}
.infoLayer{
    width: 6.26rem;
    height: 7.49rem;
    background: #FFFFFF;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 550;
    border-radius: .6rem;
    margin-top: -3.6rem;
    margin-left: -3rem;
    img{
        width: 100%;
        height: 100%;
    }
}
.gotoTop{
    width: .92rem;
    height: 1rem;
    background: url(../assets/img/dot_hj.png) no-repeat;
    background-size: 100% 100%;
    position: fixed;
    bottom: 2.5rem;
    right: .4rem;
    z-index: 5;
}
.gotoTop::after{
    content: '返回顶部';
    position: absolute;
    bottom: -.4rem;
    font-size: .2rem;
    color: #00cd86;
    width: 150%;
    left: -25%;
    text-align: center;
}
#myVideo{
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
.playMain{
    position: fixed;
    background: #000000;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    .closeVideo{
        width: 1.2rem;
        height: .6rem;
        background: #3296FA;
        border-radius: .1rem;
        position: absolute;
        top:.2rem;
        right: .2rem;
        font-size: .24rem;
        line-height: .6rem;
        text-align: center;
        color: #FFFFFF;
    }
}
.courseInfo{
    width: 100%;
    float: left;
}
.introBox{
    position: relative;
    img{
        width: 100%;
        position: relative;
        z-index: 1;
    }
}
.intro_1{
    position: relative;
    .videoBox{
        position: absolute;
        z-index: 2;
        width: 6.06rem;
        height: 3.4rem;
        border-radius: .25rem;
        overflow: hidden;
        background: url(../assets/img/videoImg.png) no-repeat;
        background-size: 100% 100%;
        top:6.4rem;
        left:.72rem;
        .videoPlay{
            width: 1rem;
            height: 1rem;
            background: url(../assets/img/dot-play.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            z-index: 3;
            top: 50%;
            left: 50%;
            margin-left: -.5rem;
            margin-top: -.5rem;
        }
        .videoTit{
            width: 1.77rem;
            height: .29rem;
            background:url(../assets/img/dot-tit.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            z-index: 3;
            top: 2.5rem;
            left: 50%;
            margin-left: -.885rem;
        }
    }
    .videoBox::after{
        content: '\20';
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba($color: #000000, $alpha: .5);
        top: 0;
        left: 0;
    }
}
.intro_1{
    width: 100%;
    height: 15.19rem;
}
.intro_2{
    width: 100%;
    height: 8.65rem;
}
.intro_3{
    width: 100%;
    height: 9.19rem;
}
.intro_4{
    width: 100%;
    height: 8.12rem;
}
.intro_5{
    width: 100%;
    height: 14.02rem;
}
.intro_6{
    width: 100%;
    height: 7.64rem;
}
.intro_7{
    width: 100%;
    height: 8.64rem;
}
.intro_8{
    width: 100%;
    height: 8.45rem;
}
.intro_9{
    width: 100%;
    height: 8.88rem;
}
.intro_10{
    width: 100%;
    height: 13.99rem;
}
.intro_11{
    width: 100%;
    height: 13.21rem;
}
.fixTabBot{
    width: 100%;
    height: 1.25rem;
    background: #FFFFFF;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-shadow: 0 -.02rem .08rem rgba($color: #666666, $alpha: .3);
    .fixTab{
        float: left;
        width: 25%;
        height: 1.25rem;
        line-height: 1.25rem;
        font-size: .3rem;
        color: #333333;
        text-align: center;
        position: relative;
        &.activ{
            color: #ff9600;
            font-weight: bold;
        }
        &.activ::after{
            content: '\20';
            position: absolute;
            width: 50%;
            height: .07rem;
            background: #ff9600;
            bottom: 10px;
            left: 25%;
        }
    }
    .tab_1{
        background: url(../assets/img/dot_sx_1.png) no-repeat;
        background-position: center .25rem;
        background-size: auto 35%;
    }
    .tab_2{
        background: url(../assets/img/dot_yd_1.png) no-repeat;
        background-position: center .25rem;
        background-size: auto 35%;
    }
    .tab_3{
        background: url(../assets/img/dot_dy_1.png) no-repeat;
        background-position: center .25rem;
        background-size: auto 35%;
    }
    .tab_1.activ{
        background: url(../assets/img/dot_sx_2.png) no-repeat;
        background-position: center .25rem;
        background-size: auto 35%;
    }
    .tab_2.activ{
        background: url(../assets/img/dot_yd_2.png) no-repeat;
        background-position: center .25rem;
        background-size: auto 35%;
    }
    .tab_3.activ{
        background: url(../assets/img/dot_dy_2.png) no-repeat;
        background-position: center .25rem;
        background-size: auto 35%;
    }
    .contactUs{
        position: absolute;
        right: 0;
        bottom: 0;
        width: 1.7rem;
        height: 1.69rem;
        background: url(../assets/img/dot-linkUs.png) no-repeat;
        background-size: 100% 100%;
    }
}
.mainContainer{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.flexContainer{
    width: 100%;
    height: 100%;
    overflow: auto;;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

    
</style>